<!--
 * @Author: ChaiHongJun
 * @Date: 2021-03-31 21:42:26
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-05-03 15:05:59
 * @version:
 * @Description: 歌单详情页
-->
<template>
  <div class="playlist-detail container">
    <div class="left shadow">
      <div class="top">
        <div class="avatar">
          <img :src="getPlaylistDetail.coverImgUrl" alt="" />
        </div>
        <div class="info">
          <div class="title flex-between">
            <span>{{ getPlaylistDetail.name }}</span>
            <div></div>
          </div>
          <div class="user flex-row" v-if="getPlaylistDetail.creator">
            <div class="avatar">
              <img :src="getPlaylistDetail.creator.avatarUrl" alt="" />
            </div>
            <p class="nickname">{{ getPlaylistDetail.creator.nickname }}</p>
            <p class="createTime">
              {{ formatTimeStamp(getPlaylistDetail.createTime) }} 创建
            </p>
          </div>
          <div class="tag flex-row">
            标签：
            <a
              href=""
              v-for="(tag, index) of getPlaylistDetail.tags"
              :key="index"
              @click="toPlaylist(tag)"
              >{{ tag }}</a
            >
          </div>
          <div class="desc">
            <p class="ellipsis-two">
              {{ getPlaylistDetail.description }}
            </p>
            <span class="flex-row"
              >全部
              <i
                class="iconfont niceiconfontyoujiantou-copy-copy-copy-copy"
              ></i>
            </span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="artist-box">
          <div class="tool-head">
            <div class="item play-item" @click="showAndPlayAll()">
              <i class="iconfont niceOutlined_Play"></i>播放全部
            </div>
            <div class="item">
              <i class="iconfont niceicon-heart"></i>
              收藏
            </div>
          </div>
          <table class="artist-table" v-loading="loadingTable">
            <thead>
              <tr>
                <th class="th-index">序号</th>
                <th class="th-name">歌曲</th>
                <th class="th-artist">歌手</th>
                <th class="th-album">专辑</th>
                <th class="th-duration">时长</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(track, index) of getSongs" :key="index">
                <td>
                  <!-- 序号 -->
                  <div class="index-container flex-center">
                    <span class="num">{{ index + 1 }}</span>
                    <div class="play-icon"></div>
                    <i
                      class="iconfont nicebofang2 play-btn"
                      @click="playOrPauseSelectedTrack(track)"
                    ></i>
                    <i class="iconfont nicezanting1 pause-btn"></i>
                  </div>
                </td>
                <td>
                  <!-- 歌曲 -->
                  <div class="name-container">
                    <div class="avatar">
                      <el-image :src="track.al.picUrl"></el-image>
                    </div>
                    <p class="name ellipsis" :title="track.name">
                      {{ track.name }}
                    </p>
                  </div>
                </td>
                <td>
                  <!-- 歌手 -->
                  <div class="artist-container">
                    <p :title="track.ar[0].name" class="author ellipsis">
                      {{ track.ar[0].name }}
                    </p>
                  </div>
                </td>
                <td>
                  <!-- 专辑 -->
                  <div class="album-container">
                    <p :title="track.al.name" class="ellipsis">
                      {{ track.al.name }}
                    </p>
                  </div>
                </td>
                <td>
                  <!-- 时长 -->
                  <div class="duration-container">
                    <!-- <p>{{ track.dt }}</p> -->
                    <p>{{ formatSongDuration(track.dt) }}</p>
                    <div class="song-tools">
                      <i title="喜欢" class="iconfont niceicon-heart"></i
                      ><i title="下载" class="iconfont nicexiazai"></i
                      ><i title="更多" class="iconfont nicedot"></i>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="like module shadow">
        <div class="card-header flex-row">
          <span>喜欢这个歌单的人</span>
        </div>
        <ul v-loading="loadingLike">
          <li
            v-for="(subscriber, index) of getPlaylistDetail.subscribers"
            :key="index"
          >
            <div class="avatar" v-if="subscriber">
              <img :src="subscriber.avatarUrl" :alt="subscriber.nickname" />
            </div>
          </li>
        </ul>
      </div>
      <div class="related module shadow">
        <div class="card-header flex-row">
          <span>相关推荐</span>
        </div>
        <ul>
          <li
            v-for="(relatedPlaylist, index) in getRelatedPlaylist"
            :key="index"
            @click="getDetail(relatedPlaylist)"
          >
            <div class="avatar">
              <img
                :src="relatedPlaylist.coverImgUrl"
                :alt="relatedPlaylist.name"
              />
            </div>
            <div class="info" v-if="relatedPlaylist.creator">
              <h2 class="ellipsis" title>{{ relatedPlaylist.name }}</h2>
              <span
                >By.
                <small>{{ relatedPlaylist.creator.nickname }}</small>
              </span>
            </div>
          </li>
        </ul>
      </div>
      <div class="comment module shadow">
        <div class="card-header flex-row">
          <span>精彩评论</span>
        </div>
        <ul v-loading="loadingComments" v-if="getPlaylistComments.length > 0">
          <li
            class="item"
            v-for="(comment, index) in getPlaylistComments"
            :key="index"
          >
            <div class="avatar" v-if="comment.user">
              <img :src="comment.user.avatarUrl" :alt="comment.user.nickname" />
            </div>
            <div class="info" v-if="comment.user">
              <h2>
                {{ comment.user.nickname }}
                <small>{{ getDateDiff(comment.time) }}</small>
              </h2>
              <p>{{ comment.content }}</p>
            </div>
          </li>
        </ul>
        <p class="no-data-text" v-else>还没评论</p>
      </div>
    </div>
  </div>
</template>
<script>
// utils
import {
  formatTimeStamp,
  getDateDiff,
  formatSongDuration,
} from "@/utils/index.js";
// getters
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      // currentPlaylistID: this.$route.query.id, //当前歌单ID
      // trackIds: [], // 歌单内全部歌曲ID   trackId.id
      tracks: [], //歌单曲目 包含   track.name  track.al.name track.ar.name
      playlist: {}, // 当前歌单信息
      subscribersCount: 14, //歌单订阅者数量
      commentNum: 5, //歌单评论数
      loadingTable: false,
      loadingLike: false,
      loadingComments: false,
      relatedRecommendID: "", //相关推荐歌单ID
    };
  },
  mounted() {
    let id = this.$route.query.id; //当前歌单ID
    // 异步加载歌单信息
    this.loadingTable = true;
    this.$store.dispatch("showPlaylistDetail", {
      id,
      subscribersCount: this.subscribersCount,
    });
    this.loadingTable = false;
    // 获取相关推荐歌单
    this.loadingLike = true;
    this.$store.dispatch("showRelatedPlaylist", id);
    this.loadingLike = false;
    this.loadingComments = true;
    // 获取相关评论
    this.$store.dispatch("showPlaylistComments", {
      id,
      commentNum: this.commentNum,
    });
    this.loadingComments = false;
    // console.log("相关评论");
    // console.log(this.getPlaylistComments);
  },
  computed: {
    ...mapGetters([
      "getPlayingIndex",
      "getPlayStatus",
      "getHistorQueue",
      "getPlaylistDetail",
      "getRelatedPlaylist",
      "getPlaylistComments",
      "getSongs",
    ]),
    // 歌曲信息
    // playlistTracks() {},
    formatTimeStamp() {
      return (originalData) => {
        return formatTimeStamp(originalData);
      };
    },
    getDateDiff() {
      return (originalData) => {
        return getDateDiff(originalData);
      };
    },
    formatSongDuration() {
      return (originalData) => {
        return formatSongDuration(originalData);
      };
    },
  },
  methods: {
    // 播放选中的单曲
    playOrPauseSelectedTrack(track) {
      //显示播放器 组件
      this.$store.commit("SHOW_PLAYER", true);
      if (this.getPlayStatus) {
        // 原先是播放状态，点击之后变成暂停状态
        this.$store.commit("PLAY_OR_PAUSE", false);
        if (this.$refs.audioPlayer) {
          this.$nextTick(() => {
            this.$refs.audioPlayer.pause();
          });
        }
      } else {
        //否则变成播放状态
        this.$store.commit("PLAY_OR_PAUSE", true);
        track.audioSrc =
          "https://music.163.com/song/media/outer/url?id=" + track.id + ".mp3";
        if (this.$refs.audioPlayer) {
          this.$nextTick(() => {
            this.$refs.audioPlayer.play();
          });
        }
        if (!this.getHistoryQueue.indexOf(track)) {
          //则添加到历史播放列表
          this.$store.commit("SET_HISTORY_QUEUE", track);
        }
      }
      console.log("单曲播放：");
      console.log(track);
    },
    // 获取歌单详情
    // id 歌单id
    getDetail(playlist) {
      //点击之后改变了歌单ID
      // 再通过 watch 监测当前页面的路由ID变化
      this.relatedRecommendID = playlist.id;
    },
    //显示播放器
    showAndPlayAll() {
      //显示播放器 组件
      this.$store.commit("SHOW_PLAYER", true);
      // 播放器设置为暂停状态
      this.$store.commit("PLAY_OR_PAUSE", false);

      // this.$emit()

      console.log(this.getSongs);

      //添加全部歌曲到待播放
      // this.$store.commit("ADD_TOBEPLAYED", this.tracks);
      //当前播放歌曲添加到 历史播放列表
      this.$store.commit(
        "SET_HISTORY_PLAYLIST",
        this.tracks[this.getPlayingIndex]
      );
    },

    //显示不同歌单
    toPlaylist(tag) {
      //路由切换
      this.$router.push({ name: "Playlist", query: { cat: tag } });
    },
  },
  watch: {
    //点击了推荐歌单
    relatedRecommendID(newID) {
      this.$router.push({ name: "Detail", query: { id: newID } });
      //当前歌单详情
      this.$store.dispatch("showPlaylistDetail", {
        id: newID,
        subscribersCount: this.subscribersCount,
      });

      this.$store.dispatch("showRelatedPlaylist", newID);
      this.$store.dispatch("showPlaylistComments", {
        id: newID,
        commentNum: this.commentNum,
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
.playlist-detail {
  display: flex;
  align-items: flex-start;

  .left {
    flex: 1;
    width: 950px;
    padding: 15px;
    border-radius: 8px;
    margin-right: 20px;

    .top {
      display: flex;

      > .avatar {
        width: 200px;
        height: 200px;
        border-radius: 8px;
        position: relative;
        margin-right: 30px;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
          position: relative;
        }

        &::before {
          content: '';
          width: 95%;
          height: 95%;
          background: rgba(0, 0, 0, 0.2);
          display: block;
          position: absolute;
          top: 15px;
          right: -5px;
          z-index: 0;
          border-radius: 8px;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .title {
          width: 100%;
          font-size: 24px;
          font-weight: 700;
          line-height: 24px;
          margin-bottom: 20px;
          margin-top: 10px;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .tag {
          // margin-top: 15px;
          // margin-bottom: 15px;
          a {
            color: #fff;
            background: $color-theme;
            margin-right: 15px;
            font-size: 12px;
            cursor: pointer;
            padding: 4px 12px;
            border-radius: 15px;

            &::after {
              // content: '，'
            }

            &:last-child {
              &::after {
                content: '';
              }
            }
          }
        }

        .user {
          margin-bottom: 15px;

          .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: relative;
            margin-right: 15px;
            cursor: pointer;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              position: relative;
            }
          }

          .nickname {
            font-size: 14px;
            margin-right: 30px;
            cursor: pointer;

            &:hover {
              color: $color-theme;
            }
          }

          .createTime {
            font-size: 14px;
            color: #808080;
          }
        }

        .desc {
          display: flex;
          flex-direction: column;
          line-height: 1.6;
          margin-top: 15px;

          span {
            flex-shrink: 0;
            color: $color-theme;
            cursor: pointer;
          }

          p {
            line-height: 1.6;
            font-weight: 400;
            flex: 1;
            font-size: 14px;
          }
        }
      }
    }

    .content {
      margin-top: 20px;
    }
  }

  .right {
    width: 350px;
    flex-shrink: 0;

    .module {
      padding: 15px;
      width: 100%;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .like {
      padding-bottom: 5px;

      ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px;

        li {
          flex: 0 0 14.285714285714%;
          max-width: 14.285714285714%;
          padding: 0 5px 10px;

          .avatar {
            width: 100%;
            border-radius: 3px;

            img {
              width: 100%;
              border-radius: 3px;
            }
          }
        }
      }
    }

    .related {
      padding-bottom: 5px;

      ul {
        li {
          display: flex;
          margin-bottom: 15px;
          cursor: pointer;

          .avatar {
            width: 50px;
            height: 50px;
            border-radius: 3px;
            margin-right: 15px;
            flex-shrink: 0;

            img {
              width: 100%;
              border-radius: 3px;
            }
          }

          .info {
            height: 50px;
            width: calc(100% - 60px);
            flex: 1;
            display: flex;
            justify-content: center;
            flex-direction: column;

            h2 {
              font-size: 14px;
              margin-bottom: 10px;
              width: 100%;
            }

            span {
              font-size: 12px;
              color: #a5a5c1;
            }

            &:hover {
              h2 {
                color: $color-theme;
              }
            }
          }
        }
      }
    }

    .comment {
      ul {
        li {
          padding: 10px 0;
          width: 100%;
          display: flex;

          .avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin-right: 12px;
            flex-shrink: 0;
            cursor: pointer;

            img {
              width: 100%;
              border-radius: 50%;
            }
          }

          .info {
            flex: 1;

            h2 {
              font-size: 15px;
              margin-right: 5px;
              margin-bottom: 10px;
              cursor: pointer;

              small {
                font-size: 12px;
                color: #a5a5c1;
                font-weight: 200;
              }
            }

            p {
              width: 100%;
              font-size: 12px;
              color: #666666;
              line-height: 1.6;
              padding: 5px 10px;
              background: #f5f5f5;
              margin-top: 5px;
              border-radius: 3px;
            }
          }
        }
      }
    }

    .card-header {
      border-left: 3px solid $color-theme;
      height: 20px;
      padding-left: 1rem;
      margin-bottom: 15px;
      font-weight: bold;

      .icon-like {
        font-size: 20px;
      }
    }
  }
}

.artist-box >>> tbody img {
  border-radius: 5px;
}

.artist-box {
  width: 100%;

  .tool-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 15px 0;

    .item {
      background: #f2f2f2;
      color: #333333;
      padding: 7px 15px;
      border-radius: 50px;
      cursor: pointer;
      margin-left: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s;

      i {
        margin-right: 5px;
      }

      .nicefenxiang1 {
        font-size: 18px;
      }

      &.active {
        background: $color-theme;
        color: #fff;
      }
    }

    .play-item {
      background: $color-theme;
      color: #fff;
    }
  }

  .artist-table {
    width: 100%;

    thead {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #fafafa;
      color: #999;

      th {
        padding: 0 9px;
        text-align: left;
        font-weight: 300;
        white-space: nowrap;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;

        &.th-index {
          width: 10%;
          text-align: center;
        }

        &.th-name {
          width: 40%;
        }

        &.th-artist {
          width: 25%;
        }

        &.th-album {
          width: 15%;
        }

        &.th-duration {
          width: 15%;
          text-align: right;
          padding-right: 40px;
        }
      }
    }

    tbody {
      width: 100%;

      tr {
        height: 50px;
        line-height: 50px;
        transition: background-color 0.2s linear;

        td {
          padding: 0 9px;
          white-space: nowrap;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
        }

        .index-container {
          .num {
            color: #4a4a4a;
            font-weight: 500;
          }

          .play-icon {
            display: none;
            height: 16px;
            min-width: 18px;
            overflow: hidden;

            .line {
              width: 2px;
              height: 100%;
              margin-left: 2px;
              background-color: #ff410f;
              animation: play 0.9s linear infinite alternate;
            }
          }

          .play-btn {
            color: $color-theme;
            font-size: 28px;
            display: none;
            text-align: left;
            cursor: pointer;
          }

          .pause-btn {
            color: $color-theme;
            font-size: 30px;
            display: none;
            text-align: left;
            cursor: pointer;
          }
        }

        .name-container {
          display: flex;
          align-items: center;

          .avatar {
            width: 35px;
            height: 35px;
            border-radius: 5px;
            flex-shrink: 0;
            margin-right: 10px;

            img {
              width: 100%;
              border-radius: 5px;
            }
          }
        }

        .artist-container {
          .author {
          }
        }

        .duration-container {
          text-align: right;
          padding-right: 15px;
          position: relative;

          p {
            padding-right: 10px;
          }

          .song-tools {
            display: flex;
            justify-content: flex-end;
            top: 50%;
            margin-top: -25px;
            right: 10px;
            position: absolute;
            display: none;

            i {
              flex-shrink: 0;
              cursor: pointer;
              margin-right: 15px;
              font-size: 20px;
            }
          }
        }

        &:nth-child(2n) {
          background: #f7f7f7;
        }

        &.playing {
          p {
            color: $color-theme;
          }

          i {
            color: $color-theme;
          }

          .index-container {
            .num {
              display: none;
            }

            .play-icon {
              display: flex;
            }

            .play-btn {
              display: none;
            }
          }
        }

        &:hover {
          background: #e8e9ed;

          .index-container {
            .num {
              display: none;
            }

            .play-btn {
              display: block;
            }
          }

          // .duration-container {
          // p {
          // display: none;
          // }
          // .song-tools {
          // display: flex;
          // }
          // }
          &.playing {
            .index-container {
              .play-btn {
                display: none;
              }

              .play-icon {
                display: none;
              }

              .pause-btn {
                display: block;
              }
            }
          }
        }
      }

      p {
        cursor: pointer;
      }
    }
  }
}
</style>